<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <table width=800 style="text-align: center; margin: 0 auto;" border=1>
            <caption>欢迎光临_vue开发的收银系统_水果店</caption>
            <tr>
                <th>苹果 10¥ / 斤, 折扣 &lt; 8折 &gt;</th>
            </tr>
            <tr>
                <td>
                    请输入你要购买的斤数 <input type="number" placeholder="斤数">
                </td>
            </tr>
            <tr>
                <td>
                    <!-- 静态页面6个变量使用后, 绑定点击事件 -->
                    <button >结账买单~</button>
                </td>
            </tr>
            <tr>
                <td>
                    结账单:
                    <span>总价:  ¥元</span>
                    <span>折后价:  ¥元</span>
                    <span>省了:  ¥元</span>
                </td>
            </tr>
        </table>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                price: 10, // 苹果单价
                dis: 0.8, // 折扣
                count: 0, // 购买的斤数
                allPrice: 0, // 总价
                disPrice: 0, // 折后价格
                savePrice: 0, // 省了多少钱
            }
        })
    </script>
</body>

</html>